import React from 'react';
import { Form, Input, DatePicker, Radio, InputNumber } from 'antd';
import CustomButton from './CustomButton';
import styles from './PersonalInfo.less';
import zh_CN from 'antd/es/date-picker/locale/zh_CN';

const PersonalInfo: React.FC = () => {
  return (
    <div className={styles.personalInfoForm}>
      <Form layout="vertical">
        {/* 1. 姓名 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>1</span>姓名<span className={styles.required}>*</span></span>} 
            name="name" 
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
        </div>

        {/* 2. 医保类型 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>2</span>医保类型<span className={styles.required}>*</span></span>} 
            name="insuranceType" 
            rules={[{ required: true, message: '请选择医保类型' }]}
          >
            <Radio.Group>
              <Radio value="urbanRural">城乡居民医保</Radio>
              <Radio value="employee">职工基本医保</Radio>
              <Radio value="selfPaid">自费</Radio>
              <Radio value="other">其他医保</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 3. 联系电话 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>3</span>联系电话<span className={styles.required}>*</span></span>} 
            name="contactPhone"
            rules={[{ required: true, message: '请填写联系电话' }]}
          >
            <div className={styles.personalFields}>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>本人手机</label>
                <Input placeholder="请输入本人手机" />
              </div>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>其他联系人</label>
                <Input placeholder="请输入其他联系人" />
              </div>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>其他联系人电话</label>
                <Input placeholder="请输入其他联系人电话" />
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 4. 年龄 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>4</span>年龄(周岁)<span className={styles.required}>*</span></span>} 
            name="age" 
            rules={[{ required: true, message: '请输入年龄' }]}
          >
            <InputNumber placeholder="请输入年龄" min={0} max={150} />
          </Form.Item>
        </div>

        {/* 5. 出生日期 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>5</span>出生日期<span className={styles.required}>*</span></span>} 
            name="birthDate" 
            rules={[{ required: true, message: '请选择出生日期' }]}
          >
            <DatePicker locale={zh_CN} placeholder="请选择出生日期" />
          </Form.Item>
        </div>

        {/* 6. 性别 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>6</span>性别<span className={styles.required}>*</span></span>} 
            name="gender" 
            rules={[{ required: true, message: '请选择性别' }]}
          >
            <Radio.Group>
              <Radio value="male">男</Radio>
              <Radio value="female">女</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 7. 身高 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>7</span>身高(厘米)<span className={styles.required}>*</span></span>} 
            name="height"
            rules={[{ required: true, message: '请填写身高' }]}
          >
            <div className={styles.personalFields}>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>自我报告</label>
                <InputNumber placeholder="请输入身高" min={100} max={250} />
              </div>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>护理病历</label>
                <InputNumber placeholder="请输入身高" min={100} max={250} />
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 8. 体重 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>8</span>体重(公斤)<span className={styles.required}>*</span></span>} 
            name="weight"
            rules={[{ required: true, message: '请填写体重' }]}
          >
            <div className={styles.personalFields}>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>自我报告</label>
                <InputNumber placeholder="请输入体重" min={20} max={200} />
              </div>
              <div className={styles.personalField}>
                <label className={styles.personalLabel}>护理病历</label>
                <InputNumber placeholder="请输入体重" min={20} max={200} />
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 9. 腰围 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>9</span>腰围<span className={styles.required}>*</span></span>} 
            name="waist" 
            rules={[{ required: true, message: '请输入腰围' }]}
          >
            <InputNumber  placeholder="请输入腰围" min={50} max={200} />
          </Form.Item>
        </div>

        {/* 10. 臀围 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>10</span>臀围</span>} 
            name="hip"
          >
            <InputNumber  placeholder="请输入臀围" min={50} max={200} />
          </Form.Item>
        </div>
      </Form>
      
      <div style={{ textAlign: 'left', marginTop: '24px' }}>
        <CustomButton 
          text="下一步" 
          onClick={() => console.log('下一步')} 
        />
      </div>
    </div>
  );
};

export default PersonalInfo;
